<template>
  <div class="settings">
    <!-- 项目设置 -->
    <el-card class="setting-section">
      <h3>项目设置</h3>
      <el-form :model="projectSettings" label-width="120px">
        <el-form-item label="项目名称">
          <el-input v-model="projectSettings.name" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input v-model="projectSettings.description" type="textarea" />
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
              v-model="projectSettings.timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveProjectSettings">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 通知设置 -->
    <el-card class="setting-section">
      <h3>通知设置</h3>
      <el-form :model="notificationSettings" label-width="120px">
        <el-form-item label="任务更新">
          <el-switch v-model="notificationSettings.taskUpdate" />
          <span class="notification-type">邮件通知</span>
        </el-form-item>
        <el-form-item label="评论">
          <el-switch v-model="notificationSettings.comment" />
          <span class="notification-type">站内通知</span>
        </el-form-item>
        <el-form-item label="文档上传">
          <el-switch v-model="notificationSettings.documentUpload" />
          <span class="notification-type">短信通知</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveNotificationSettings">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 自定义字段 -->
    <el-card class="setting-section">
      <h3>自定义字段</h3>
      <el-form :model="customFields" label-width="120px">
        <el-form-item
            v-for="(field, index) in customFields.fields"
            :key="index"
            :label="`字段 ${index + 1}`"
        >
          <el-input v-model="field.name" placeholder="字段名称" style="width: 200px;" />
          <el-select v-model="field.type" placeholder="字段类型" style="width: 200px; margin-left: 10px;">
            <el-option label="文本" value="text" />
            <el-option label="数字" value="number" />
            <el-option label="日期" value="date" />
          </el-select>
          <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              style="margin-left: 10px;"
              @click="removeCustomField(index)"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addCustomField">添加字段</el-button>
          <el-button type="primary" @click="saveCustomFields">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 项目设置
const projectSettings = ref({
  name: '示例项目',
  description: '这是一个示例项目的描述。',
  timeRange: [new Date('2023-10-01'), new Date('2023-10-31')],
});

// 通知设置
const notificationSettings = ref({
  taskUpdate: true,
  comment: true,
  documentUpload: false,
});

// 自定义字段
const customFields = ref({
  fields: [
    { name: '优先级', type: 'text' },
    { name: '预估工时', type: 'number' },
  ],
});

// 保存项目设置
const saveProjectSettings = () => {
  console.log('保存项目设置:', projectSettings.value);
};

// 保存通知设置
const saveNotificationSettings = () => {
  console.log('保存通知设置:', notificationSettings.value);
};

// 添加自定义字段
const addCustomField = () => {
  customFields.value.fields.push({ name: '', type: '' });
};

// 删除自定义字段
const removeCustomField = (index) => {
  customFields.value.fields.splice(index, 1);
};

// 保存自定义字段
const saveCustomFields = () => {
  console.log('保存自定义字段:', customFields.value);
};
</script>

<style scoped>
.settings {
  padding: 20px;
}

.setting-section {
  margin-bottom: 20px;
}

.notification-type {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}
</style>